<?php

/* @var $this yii\web\View */
use app\assets\AppAsset;
use yii\helpers\Url;

AppAsset::register($this);
AppAsset::addCss($this,'statics/css/home.css');
AppAsset::addCss($this,'statics/css/video-js.css');
AppAsset::addCss($this,'statics/css/swiper.css');
AppAsset::addScript($this,'statics/js/swiper-3.3.1.min.js');
AppAsset::addScript($this,'statics/js/home.js');


$this->title = '友途网';
?>

<div  class="row1" id="row1">
    <div class="swiper-container"  >
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/statics/images/banner1.png" class="banner_img" alt="图片加载失败"/></div>
            <div class="swiper-slide"><img src="/statics/images/banner1.png" class="banner_img"  alt="图片加载失败"/></div>
            <div class="swiper-slide"><img src="/statics/images/banner1.png" class="banner_img" alt="图片加载失败"/></div>
        </div>
        <!--如果需要分页器-->
        <div class="swiper-pagination" ></div>
    </div>
</div>
<div class="v2_row1_title">自由行，择优服务</div>
<div class="v2_row2">
    <div class="v2_row2_info">
        <div class="row2_info">
            <img src="/statics/images/index_camera_normal.png">
            <div class="row2_desc">
                <span>导游服务+旅行纪念</span>
                <span>为您提供导游2.0服务，以拍摄和旅行纪念册为亮点，完成向导、讲解基本服务外提供拍摄及其他增值服务</span>
            </div>
        </div>
        <div class="row2_info">
            <img src="/statics/images/index_manager_normal.png">
            <div class="row2_desc">
                <span>旅行管家</span>
                <span>在平台上为您定制旅游路线，提供线上的旅游咨询、线路私人定制、全新贴心管家服务</span>
            </div>
        </div>
    </div>
</div>
<div class="seperateView" >
    <span class="seperate_title">热门途友推荐</span>
    <div class="seperate_line">
        <div></div>
        <span>Tour Guide Recommended</span>
        <div></div>
    </div>
</div>



<div class="row_guides">
    <div class="guides_cellBg" >
        <div class="guides_cell " v-for="item in guideList" >
            <img :src="'http://ovc3poav6.bkt.clouddn.com/'+item.portrait" class="cell_pic">
            <div class="cell_info">
                <img :src="'http://ovc3poav6.bkt.clouddn.com/'+item.portrait" class="cell_avatar">
                <div class="guide_info">
                    <div class="info_name">
                        <span class="guide_name">{{item.name}}</span>
                        <div class="guide_price">
                            ￥<span>{{item.hourly_rate}}</span>元起
                        </div>

                    </div>
                    <div class="info_tags">
                        <div class="tag">{{item.features[0]}}</div>
                        <div class="tag">{{item.features[1]}}</div>
                    </div>
                    <div class="info_orders">
                        <span>接单2次</span>
                        <span>2条评论</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="seperateView" style="margin-top: -40px">
    <span class="seperate_title">商业模式</span>
    <div class="seperate_line">
        <div></div>
        <span>Business Model</span>
        <div></div>
    </div>
</div>
<div class="business_row">
    <div class="business_pre">
        <div class="business_mask">
            <img src="/statics/images/left_arrow.png" id="pre" class="point">
        </div>
    </div>
    <div class="slider_mutiple">
        <div class="swiper-container"  >
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="/statics/images/business_banner1.png" class="slider_img" alt="图片加载失败"/></div>
                <div class="swiper-slide"><img src="/statics/images/business_banner2.png"  class="slider_img" alt="图片加载失败"/></div>
                <div class="swiper-slide"><img src="/statics/images/business_banner3.png"  class="slider_img" alt="图片加载失败"/></div>
                <div class="swiper-slide"><img src="/statics/images/business_banner4.png"  class="slider_img" alt="图片加载失败"/></div>
                <div class="swiper-slide"><img src="/statics/images/business_banner5.png"  class="slider_img" alt="图片加载失败"/></div>
                <div class="swiper-slide"><img src="/statics/images/business_banner6.png"  class="slider_img" alt="图片加载失败"/></div>
            </div>
        </div>
    </div>
    <div class="business_next">
        <div class="business_mask">
            <img src="/statics/images/right_arrow.png" id="next" class="point">
        </div>
    </div>
</div>
<div class="insert_div_bg">
    <div class="insert_div">
        <img src="/statics/images/show_iphone.png" class="insert_div_img">
        <div class="insert_div_desc">
            <img src="/statics/images/insert_logo.png">
            <a href="http://www.cntour2.com/viewnews/2016/05/09/FUIgNPSfRkZfdeATDWuN0.shtml" target="_blank">国家旅游局关于开展导游自由执业试点工作的通知</a>
            <a href="http://www.cntour2.com/viewnews/2016/05/09/XvEIPb8zG3yRPze5ZstR1.shtml" target="_blank">导游自由执业试点实施方案</a>
            <a href="http://www.cntour2.com/viewnews/2016/05/09/ERe52HOjwdsyai8KXuPm2.shtml" target="_blank">导游自由执业试点管理办法（试行）</a>
        </div>
    </div>
</div>
<div class="seperateView" >
    <span class="seperate_title">游前管理</span>
    <div class="seperate_line">
        <div></div>
        <span>Pre Tour Management</span>
        <div></div>
    </div>
</div>
<div class="pre_management">
    <div class="pre_row" >
        <div class="pre_item">
            <img src="/statics/images/pre_icon1.png" class="pre_icon"> </img>
            <p class="pre_title">导游选择</p>
            <small class="pre_desc" >首次使用友途的用户可以对众多导游进行条件筛选；非首次使用友途的用户，友途将根据其以往下单习惯以及预约导游的次数优先推荐</small>
        </div>
        <div class="pre_item">
            <img src="/statics/images/pre_icon2.png" class="pre_icon"> </img>
            <p class="pre_title">区域选择</p>
            <small class="pre_desc" >提高用户预约导游的成功率，用户需要先行选择所在区域，以便距离较近的导游接单</small>
        </div>
        <div class="pre_item">
            <img src="/statics/images/pre_icon3.png" class="pre_icon"> </img>
            <p class="pre_title">定价选择</p>
            <small class="pre_desc" >用户可根据经费预算在友途筛选心理价位所在的价格区间，提高下单效率</small>
        </div>
        <div class="pre_item">
            <img src="/statics/images/pre_icon4.png" class="pre_icon"> </img>
            <p class="pre_title">系统对接</p>
            <small class="pre_desc" >当用户选择某导游进行预约时，用户可通过友途平台直接与该导游进行对接。一旦用户与导游出现争端，友途将以系统消息为判断依据</small>
        </div>
        <div class="pre_item">
            <img src="/statics/images/pre_icon5.png" class="pre_icon"> </img>
            <p class="pre_title">用户与导游交流</p>
            <small class="pre_desc" >用户下单前或下单后需及时与所预约的导游联系，确认出行时间及地点。需要更改时间或地点的，也需要第一时间与导游进行沟通</small>
        </div>
    </div>
</div>
<div class="seperateView" >
    <span class="seperate_title">为什么选择友途</span>
    <div class="seperate_line">
        <div></div>
        <span>Why Choose YouTu</span>
        <div></div>
    </div>
</div>
<div class="to_youtu">
    <div class="youtu_content">
        <div class="youtu_info">
            <span>友途网介绍</span>
            <span>在途中遇见你</span>
            <div class="youtu_video">
                <div class="youtu_maskView" id="maskView1">
                    <img src="/statics/images/video_play.png" id="play1">
                </div>
                <div class="youtu_video_bg" id="video_bg1">
                    <video id="my-video1" class="video-js " controls preload="auto" data-setup="{}" style="width:100%;height:100%;object-fit: fill;" onended="videoEnd1()">
                        <source src="http://7xldgj.com1.z0.glb.clouddn.com/video-banner.mp4" type="video/mp4">
                        <source src="http://7xldgj.com1.z0.glb.clouddn.com/video-banner.mp4" type="video/webm">
                        <source src="http://7xldgj.com1.z0.glb.clouddn.com/video-banner.mp4" type="video/ogg">
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
            </div>
        </div>
        <div class="youtu_info">
            <span>旅行新定义</span>
            <span>自由行的管家</span>
            <div class="youtu_video">
                <div class="youtu_maskView" id="maskView2">
                    <img src="/statics/images/video_play.png" id="play2">
                </div>
                <div class="youtu_video_bg" id="video_bg2">
                    <video id="my-video2" class="video-js " controls preload="auto" data-setup="{}" style="width:100%;height:100%;object-fit: fill;" onended="videoEnd2()">
                        <source src="http://7xldgj.com1.z0.glb.clouddn.com/video-banner.mp4" type="video/mp4">
                        <source src="http://7xldgj.com1.z0.glb.clouddn.com/video-banner.mp4" type="video/webm">
                        <source src="http://7xldgj.com1.z0.glb.clouddn.com/video-banner.mp4" type="video/ogg">
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="report">
    <span>媒体报道</span>
    <div class="report_imgs">
        <a target="_blank" href="http://www.360doc.com/content/17/0904/14/8507568_684537057.shtml"></a>
        <a target="_blank" href="http://www.360doc.com/content/17/0911/20/8507568_686328597.shtml"></a>
        <a target="_blank" href="http://jc.sx198.cn/ArticleView_108425.html"></a>
        <a target="_blank" href="http://zj.qq.com/a/20170904/049689.htm"></a>
        <a target="_blank" href="http://zjnews.zjol.com.cn/zjnews/hznews/201709/t20170904_4967848.shtml"></a>

    </div>
</div>

<div class="coverLogo">
    <img  src="/statics/images/coverLogo.png">
    <img src="/statics/images/coverLogo_text.png">
    <div class="slogan">在途中随行所遇</div>
</div>
<script>



</script>